<html>
<head>
<script src = "../../build/yahoo/yahoo.js" ></script>
<script src = "../../build/event/event.js" ></script>
<script src = "../../build/dom/dom.js" ></script>
<script src = "../../build/connection/connection.js" ></script>
<script src = "../../build/dragdrop/dragdrop.js" ></script>
<script src = "../../build/logger/logger.js" ></script>
<script>
YAHOO.widget.Logger.enableBrowserConsole() 
var l = new YAHOO.widget.LogWriter("(");
YAHOO.GLOBAL = true; // a property to identify our global
YAHOO.example.SandBox = function() {
    var modules=[],loaded=[],callbacks=[],count=0;

    // xdomain won't work for this simple test case
    var urls = {
        "yahoo": "/build/yahoo/yahoo.js",
        "event": "/build/event/event.js",
        "dom": "/build/dom/dom.js",
        "dragdrop": "/build/dragdrop/dragdrop.js"
    };

    function handleSuccess(o) {
        var info = o.argument;

        // store the response in the position it was requested
        loaded[info[0]] = o.responseText; 

        // only generate the sandbox once everything is loaded
        count = count+1;
        if (count == modules.length) {
            sandbox(info[2]);
        }
    }

    function handleFailure(o) { l.log("error: " + o); }

    function sandbox(name) {
        // wrap the contents of the requested modules in an anonymous function
        var t = "(function() {\n"
    
        // return the locally scoped YAHOO.  Requires YAHOO version 2.1.0+
        var b = "\nreturn YAHOO\n})();"

        var newyahoo = eval(t + loaded.join("\n") + b);

        // send the sandboxed YAHOO to the callback
        callbacks[name](newyahoo);
    }

    return { 
        load: function(m, name, callback) {
            modules=m;
            callbacks[name] = callback;
            for (var i=0;i<m.length;i=i+1) {
                //modules.push(m[i]);
                var o = {
                    success: handleSuccess,
                    failure: handleFailure,
                    // module index, module name, sandbox name
                    argument: [i, m[i], name]
                };
                var request = YAHOO.util.Connect.asyncRequest('GET',urls[m[i]],o);
            }
            
        }
    };
} ();

function globalEvent() { l.log("global event"); }
function sandboxedEvent() { l.log("sandboxed event"); }

function onLoaded(sandboxed) {
    YAHOO123 = sandboxed;

    // checking that they are different
    l.log("global YAHOO.GLOBAL, should be true: " + YAHOO.GLOBAL);
    l.log("sandboxed YAHOO.GLOBAL, should be undefined: " + YAHOO123.GLOBAL);

    // checking that they both work
    YAHOO.util.Event.on("tester1", "click", globalEvent);
    YAHOO123.util.Event.on("tester2", "click", sandboxedEvent);

    // global drag and drop won't interact with sandboxed drag and drop
    var dd1 = new YAHOO.util.DD("ddel1");
    dd1.onDragDrop= function(e, id) {l.log( "global dd1 " + id )};
    var dd2 = new YAHOO.util.DD("ddel2");
    dd2.onDragDrop= function(e, id) {l.log( "global dd2 " + id )};

    // sandboxed
    var dd3 = new YAHOO123.util.DD("ddel3");
    dd3.onDragDrop= function(e, id) {l.log( "sandboxed dd3 " + id )};
    var dd4 = new YAHOO123.util.DD("ddel4");
    dd4.onDragDrop= function(e, id) {l.log( "sandboxed dd4 " + id )};
}

YAHOO.example.SandBox.load(["yahoo", "event", "dom", "dragdrop"], "YAHOO123", onLoaded);

</script>
</head>
<body class="yui-skin-sam">
<style>.dd {position:absolute; height:50px; width:50px; border:1px solid green} 
  #ddel1 {top: 100px; left: 100px; background: red}
  #ddel2 {top: 100px; left: 200px; background: red}
  #ddel3 {top: 200px; left: 100px; background: blue}
  #ddel4 {top: 200px; left: 200px; background: blue}</style>
<div id="ddel1" class="dd"></div><div id="ddel2" class="dd"></div><div id="ddel3" class="dd"></div><div id="ddel4" class="dd"></div>
<input type="button" id="tester1" value="global" /><input type="button" id="tester2" value="sandboxed" />
</body>
</html>
